import React from 'react'
import REACTDOM from 'react-dom'

class NameCard extends React.Component{
    componentDidMount() {
       console.log('当前组件实例==>',REACTDOM.findDOMNode(this));
    }
    render() {
        const {name, number, isHuman, tags} = this.props
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul style={{listStyle:'none'}}>
                    <li>电话: {number}</li>
                    <li>人类: {isHuman ? '人类为' : 'waixingren'}</li>
                    <hr/>
                    <p>
                       { tags.map((tag, index) => (
                           <span className="badge badge-pill" key={index}>{tag.name} {tag.age}</span>
                       ))  }
                    </p>
                </ul>
            </div>
        )
    }
}

export default NameCard